import React, { Component } from 'react';
import "../styles/MyTabbar.scss"
import "../assets/font_3849441_kx3ucal4iu/iconfont.css"

class MyTabbar extends Component {
    constructor(props){
        super(props)
        this.state= {
            ssindex:0,
            nav:[
                {icon:'icon-shouye',text:'店铺'},
                {icon:'icon-fenxiang',text:'分类'},
                {icon:'icon-31quanbushangpin',text:'全部商品'},
                {icon:'icon-gouwuche',text:'购物车'},
                {icon:'icon-wodeguanzhu',text:'个人中心'},
            ]
        }
    }
    indexClick(index){
        this.setState({ssindex:index})
    }
    render() {
        return (
            <div className='MyTabbar'>
                <div className="buttom">
                {
                    this.state.nav.map((item,index)=>{
                        return(
                            <div className={'item ' + (this.state.ssindex === index ? 'active':'')} key={index} onClick={()=>{this.indexClick(index)}}>
                                <span className={'iconfont ' + item.icon}></span>
                                <span className='text'>{item.text}</span>
                            </div>
                        )
                    })
                }
                </div>
            </div>
        );
    }
}

export default MyTabbar;